<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12-列表动画</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.min.css">
<link rel="stylesheet" href="./lib/lib/css/bootstrap.min.css">
<style type="text/css">
	
	li{
		list-style: none;
		border:1px dashed #999 !important;
		margin:5px;
		line-height: 35px;
	}

	.v-enter,.v-leave-to{
		opacity: 0;
		transform: translateY(20px);
	}

	.v-enter-active,
	.v-leave-active{
		transition: all .3s linear;
	}

	li:hover{
		background-color: hotpink;
		transition: all .4s ease;
	}

	.v-move{
		transition: all .6s linear;
	}

	.v-leave-active{
		position: absolute;
	}

</style>
</head>
<body>
<br>

<h3>在实现列表的过渡效果时，如果需要过渡的元素是通过v-for循环渲染出来的，不能使用 transition 包裹，这时换作 transitionGroup 来渲染包裹 </h3>
<h3>要给里添加动画必须给 li 加上 key 属性</h3>
<h3> <span class="help">w3c规范:  行间元素不能存放块状元素</span></h3>


<p>此时审查元素会发现</p>
<div class="container" id="app">
	<label for="">id: <input type="text" v-model="inputVal"></label>
	<label for="">name: <input type="text" v-model="inputValName" @keyup.enter="add"></label>
	<input type="button" @click="add" value="添加">
	

		<!-- 写上 appear 可以添加入场动画 -->
		<transition-group appear tag="ul">
			<li v-for="(item,index) in list" :key="item.id" @click="del(index)">{{item.id}}----{{item.name}} </li>
		</transition-group>



	<hr>
	<p>添加 tag="ul" 可以将transition-group 转换为ul标签</p>
	<p>tag 翻译为： 标签为;定义为 </p>

</div>





<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	id:'',
  	inputVal:'',
  	inputValName:'',
  	list:[
  		{id:1, name:'赵高'},
  		{id:2, name:'秦桧'},
  		{id:3, name:'严嵩'},
  		{id:4, name:'魏忠贤'},
  	]
  },

  methods:{

  		add(){
  			this.list.push({id:this.inputVal,name:this.inputValName})
  		},
  		del(index){
  			this.list.splice(index,1)//从index中删除一个
  		},


  },

})




</script>
</body>
</html>